<template>
    <div>
      <detail-banner :bannerImg="bannerImg" :gallaryImg="gallaryImg" :signtName="signtName" :number="number"></detail-banner>
      <detail-header :signtName="signtName"></detail-header>
      <div class="content">
        <detail-list :categoryList="categoryList"></detail-list>
      </div>
    </div>
</template>

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'

import axios from 'axios'

export default {
  name: 'detail',
  components: {
    DetailBanner,
    DetailHeader,
    DetailList
  },
  data () {
    return {
      signtName: '',
      bannerImg: '',
      gallaryImg: [],
      categoryList: [],
      number: ''
    }
  },
  methods: {
    getDetailData () {
      axios.get('api/detail.json?id=' + this.$route.params.id).then(this.getDetailDataSuccess)
    },
    getDetailDataSuccess (res) {
      console.log(res)
      if (res.data.ret && res.data.data) {
        this.signtName = res.data.data.signtName
        this.number = res.data.data.number
        this.bannerImg = res.data.data.bannerImg
        this.gallaryImg = res.data.data.gallaryImg
        this.categoryList = res.data.data.categoryList
      }
    }
  },
  mounted () {
    this.getDetailData()
  },
  activated () {
    this.getDetailData()
  }
}
</script>

<style lang="stylus" scoped>

</style>
